<template>
  <div :style="{ width: width, height: height }">
    <div id="main" :style="{ width: width, height: height, background: background }" ref="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      myChart: {},
      option: {}
    }
  },
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    background: {
      type: String,
      default: '#fff'
    },
    legendData: {
      type: Array,
      default: () => []
    },
    xAxisData: {
      type: Array,
      default: () => []
    },
    yAxisData: {
      type: Array,
      default: () => []
    },
    seriesData: {
      type: Array,
      default: () => []
    },
    isScroll: {
      type: Boolean,
      default: false
    },
  },
  mounted() {
    // 初始化chart
    this.$nextTick(() => {
      // this.myChart = echarts.init(document.getElementById('main'))
      this.myChart = echarts.init(this.$refs.chart)
      // window.onresize = () => {
      //   this.myChart.resize()
      // }
    })
  },

  methods: {
    // 初始化动态加载chart
    init() {
      var seriesData = this.seriesData
      if (seriesData.length < 0) return []
      var series = []
      seriesData.forEach((el, i) => {
        // 最后一个是折线
        if (el.type === 'bar') {
          series.push({
            name: el.name,
            type: 'bar',
            stack: '总量',
            barGap: '10%',
            barMaxWidth: 60,
            yAxisIndex: el.yAxisIndex || 0,
            tooltip: {
              valueFormatter: function(value) {
                return value + el.company
              }
            },
            data: el.data,
            itemStyle: {
              normal: {
                color: function(params) {
                  return el.colorList[0]
                },
                label: {
                  show: true,
                  textStyle: {
                    color: el.textColor
                  },
                  position: 'inside',
                  formatter: function(p) {
                    return p.value > 0 ? p.value : ''
                  }
                }
              }
            }
          })
        } else {
          series.push({
            name: el.name,
            type: 'line',
            symbolSize: 10,
            symbol: 'circle',
            yAxisIndex: el.yAxisIndex || 0,
            tooltip: {
              valueFormatter: function(value) {
                return value + el.company
              }
            },
            data: el.data,
            itemStyle: {
              normal: {
                color: el.colorList[0],
                barBorderRadius: 0,
                label: {
                  show: true,
                  textStyle: {
                    color: el.textColor,
                    fontWeight: 700
                  },
                  position: 'top',
                  formatter: function(p) {
                    return p.value > 0 ? p.value : ''
                  }
                }
              }
            }
          })
        }
      })
      return series
    },
    // 初始化颜色
    initColor() {
      var seriesData = this.seriesData
      if (seriesData.length < 0) return []
      let color = []
      seriesData.forEach(el => {
        color.push(el.colorList[0])
      })
      return color
    },
    // 初始化y
    inityAxis() {
      var yAxisData = this.yAxisData
      let yAxis = []
      if (yAxisData.length > 0) {
        yAxisData.forEach(el => {
          if (el.show) {
            yAxis.push({
              type: 'value',
              name: '',
              min: el.min,
              max: el.max,
              interval: el.interval,
              axisLabel: {
                formatter: '{value}' + el.symbol
              },
              splitLine: {
                show: false
              }
            })
          } else {
            yAxis.push({
              type: 'value',
              min: el.min || 0,
              scale: true,
              splitLine: {
                show: false
              },
              axisLabel: {
                formatter: '{value}' + el.symbol
              }
            })
          }
        })
      } else {
        yAxis.push({
          type: 'value',
          min: 0,
          scale: true,
          splitLine: {
            show: false
          }
        })
      }
      // console.log(yAxis)
      return yAxis
    },
    // 初始化统计图
    drawChart() {
      var that = this
      this.myChart.setOption({
        color: this.initColor(),
        grid: {
          left: '2%',
          right: '2%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: false, readOnly: false },
            magicType: { show: false, type: ['line', 'bar'] },
            restore: { show: false },
            saveAsImage: { show: false }
          }
        },
        legend: {
          data: this.legendData,
          bottom: '2%'
        },
        xAxis: [
          {
            type: 'category',
            data: this.xAxisData,
            axisPointer: {
              type: 'none'
            },
            axisTick: {
              show: false
            }
          }
        ],
        yAxis: this.inityAxis(),
        series: this.init(),
        dataZoom: [
          {
            show: this.isScroll,
            start: 0,
            end: 100,
            bottom: '10%',
            height:25
          }
        ]
        //  [
        //   {
        //     type: 'value',
        //     name: '',
        //     min: this.yAxisData[0].min,
        //     max: this.yAxisData[0].max,
        //     interval: this.yAxisData[0].interval,
        //     axisLabel: {
        //       formatter: '{value}'
        //     },
        //     splitLine: {
        //       show: false
        //     }
        //   },
        //   {
        //     type: 'value',
        //     name: '',
        //     min: this.yAxisData[1].min,
        //     max: this.yAxisData[1].max,
        //     interval: this.yAxisData[1].interval,
        //     axisLabel: {
        //       formatter: '{value}' + '%'
        //     },
        //     splitLine: {
        //       show: false
        //     }
        //     // show: false
        //   }
        // ],
        // dataZoom: [
        //   {
        //     show: true,
        //     height: 30,
        //     xAxisIndex: [0],
        //     bottom: 0,
        //     start: 10,
        //     end: 80,
        //     handleIcon:
        //       'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
        //     handleSize: '110%',
        //     handleStyle: {
        //       color: '#d3dee5'
        //     },
        //     textStyle: {
        //       color: '#fff'
        //     },
        //     borderColor: '#90979c'
        //   },
        //   {
        //     type: 'inside',
        //     show: true,
        //     height: 15,
        //     start: 1,
        //     end: 35
        //   }
        // ],
        // [
        //   {
        //     name: this.seriesData[0].name,
        //     type: 'bar',
        //     stack: '总量',
        //     barGap: '10%',
        //     barMaxWidth: 40,
        //     tooltip: {
        //       valueFormatter: function(value) {
        //         return value + that.seriesData[0].company
        //       }
        //     },
        //     data: this.seriesData[0].data,
        //     itemStyle: {
        //       normal: {
        //         color: function(params) {
        //           //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
        //           var colorList = that.seriesData[0].colorList
        //           //   return colorList[params.dataIndex]
        //           return colorList[0]
        //         },
        //         label: {
        //           show: true,
        //           textStyle: {
        //             color: '#fff'
        //           },
        //           position: 'inside',
        //           formatter: function(p) {
        //             return p.value > 0 ? p.value : ''
        //           }
        //         }
        //       }
        //     }
        //   },
        //   {
        //     name: this.seriesData[1].name,
        //     type: 'bar',
        //     stack: '总量',
        //     tooltip: {
        //       valueFormatter: function(value) {
        //         return value + that.seriesData[1].company
        //       }
        //     },
        //     data: this.seriesData[1].data,
        //     itemStyle: {
        //       normal: {
        //         color: function(params) {
        //           //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
        //           var colorList = that.seriesData[1].colorList
        //           return colorList[0]
        //         },
        //         label: {
        //           show: true,
        //           textStyle: {
        //             color: '#fff'
        //           },
        //           position: 'inside',
        //           formatter: function(p) {
        //             return p.value > 0 ? p.value : ''
        //           }
        //         }
        //       }
        //     }
        //   },
        //   {
        //     name: this.seriesData[2].name,
        //     type: 'line',
        //     yAxisIndex: 1,
        //     symbolSize: 10,
        //     symbol: 'circle',
        //     tooltip: {
        //       valueFormatter: function(value) {
        //         return value + that.seriesData[2].company
        //       }
        //     },
        //     data: this.seriesData[2].data,
        //     itemStyle: {
        //       normal: {
        //         color: that.seriesData[2].colorList[0],
        //         barBorderRadius: 0,
        //         label: {
        //           show: true,
        //           textStyle: {
        //             color: '#f5222d',
        //             fontWeight: 700
        //           },
        //           position: 'top',
        //           formatter: function(p) {
        //             return p.value > 0 ? p.value : ''
        //           }
        //         }
        //       }
        //     }
        //   }
        // ]
      })
      this.option && this.myChart.setOption(this.option)
      window.onresize = () => {
        this.myChart.resize()
      }
    }
  }
}
</script>

<style></style>
